<template>


  <div class="user-blog-content">

    <div class="search-inputs">
      <!-- Input for author name -->
      <el-input
        class="search-input-username"
        placeholder="请输入发布人"
        v-model="queryParamsFollow.userName"
        clearable
      ></el-input>

      <!-- Dropdown for search type -->
      <el-select v-model="queryParamsFollow.searchType" placeholder="选择搜索类型" class="custom-select">
        <el-option label="搜索" value="1"></el-option>
        <el-option label="按标题搜索" value="2"></el-option>
        <el-option label="按内容搜索" value="3"></el-option>
      </el-select>

      <!-- Input for title or content based on search type -->
      <el-autocomplete
        class="search-input"
        v-model="queryParamsFollow.keyword"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入标题或内容"
        @select="handleSelect"
      ></el-autocomplete>



      <!-- Search button -->
      <el-button type="danger" icon="el-icon-delete" circle @click="performSearch">
        搜索
      </el-button>
    </div>

    <!-- Grid layout for user's blog content -->
    <div class="blog-grid">
      <!-- Loop through user blog data -->
      <div v-for="(blogItem, index) in userBlogs" :key="'blog-' + index" class="blog-item">
        <div class="blog-details">
          <!-- Link the blog title to the detail page -->
          <h3>
            <a :href="'#/DetailArticle?aid=' + blogItem.id" target="_blank">
              <div class="blog-thumbnail">
                <div class="top">
                  <el-tooltip class="item" effect="dark" :content="'发布人：' + blogItem.createName" placement="top-start">
                      <img :src="blogItem.thumbnail" alt="Blog Image" class="blog-image">
                  </el-tooltip>
                </div>

              </div>
              <div v-html="blogItem.htitle"></div>
            </a>
          </h3>
          <p>{{ blogItem.summary }}</p>
          <!-- Add more details here as needed -->
        </div>
      </div>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParamsFollow.currentPage"
        :page-sizes="[9, 18, 54, 81]"
        :page-size="queryParamsFollow.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
    import {initDate} from '../utils/server.js'
    import {articleList, getUserInfoArticleList} from '../api/article'
    import {follow, getFollowArticleList, getPinYinAuto, getUserBlogInfo} from "../api/follow";
    export default {
        name:'Share',
        data() { //选项 / 数据
            return {
                suggestions:null,
                applyDate:"",
                queryParamsFollow: {
                    searchType:"1",
                    currentPage: 1,
                    pageSize: 9,
                    userName: undefined,
                    title : undefined,
                    month : ''
                },
                total:0,

                userInfo: {
                    following:false,
                    userId:1,
                    gender:"男",
                    email:"1741672901@qq.com",
                    avatar : "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F3bf9c263bc0f2ac5c3a7feb9e218d07475573ec8.gif&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644931768&t=34d229fa385975d48f41947b896e0242",
                    userName: '示例用户',
                    blogCount: 20, // 假设用户发布了20篇博客
                    followerCount: 1000, // 假设有1000个粉丝
                },
                isFollowing: false, // 是否已关注该用户，假设默认未关注
                userBlogs: [

                    // Add more sample blog data objects as needed
                ],
                dialogVisible: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    categoryId: 0
                },
                articleList:[],
                hasMore:true,
                squareUrl:"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
            }
        },

        methods: {
            // 异步搜索方法，用于自动补全
            // 修改 querySearchAsync 方法
            querySearchAsync(queryString, cb) {
                // 根据搜索类型判断是否需要发起请求
                if (this.queryParamsFollow.searchType === '2') {
                    // 在这里根据搜索类型发起请求获取自动补全的结果
                    // 使用 setTimeout 模拟异步请求
                    setTimeout(() => {
                        // 假设这里使用一个函数获取搜索建议，你可以根据实际情况修改
                        const results = this.getAutocompleteResults(queryString);
                        cb(results);
                    }, 300);
                } else {
                    // 如果搜索类型不是标题搜索，直接返回空建议
                    cb([]);
                }
            },


            // 处理用户选择的搜索建议
            handleSelect(item) {
                // 在这里处理用户选择的搜索建议，可以根据需要进行其他操作
                console.log('Selected:', item);
                if (this.queryParamsFollow.searchType === '2') {
                    // 发起补全功能的请求
                    this.fetchSuggestions(item.value);
                }
            },

            // 获取自动补全的结果，这里是一个示例函数
            getAutocompleteResults(query) {
                // 在这里根据搜索类型和 query 发起实际的请求
                // 返回一个包含搜索建议的数组，每个建议是一个对象 { value, label }
                    getPinYinAuto(query).then(resp=>{
                     this.suggestions = resp.data
                     return resp.data
                })
                // 这里只是一个示例，你需要根据实际情况修改
              /*  const suggestions = [

                    { value: '建议1', label: '建议1的显示文本' },
                    { value: '建议2', label: '建议2的显示文本' },
                    // ... 其他建议
                ];*/
               // return suggestions;
                return this.suggestions;
            },
            handleMonthChange(newVal) {
                // 将日期选择器返回的月份值转换为 YYYY-MM 格式的字符串
                if (newVal) {
                    const date = new Date(newVal);
                    const year = date.getFullYear();
                    const month = (date.getMonth() + 1).toString().padStart(2, '0');
                    this.queryParamsFollow.month = `${year}-${month}`;
                }
            },
            performSearch(){
                getFollowArticleList(this.queryParamsFollow).then((resp)=>{
                    this.userBlogs = resp.data.rows
                    this.total = resp.data.total
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.queryParamsFollow.currentPage = val
                this.performSearch()
            },
            toggleFollow() {

                // 切换关注状态的方法，可以发送请求到后端或者改变状态来模拟
                this.userInfo.following = !this.userInfo.following;
                // 这里可以添加相关的逻辑，如向后端发送请求更新关注状态等
                follow(this.userInfo.userId, this.userInfo.following).then((resp=>{
                    this.showUserInfo(this.userInfo.userId)
                }))

            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            showUserInfo(createBy){
                this.dialogVisible = true;
                getUserBlogInfo(createBy).then((resp)=>{
                    this.userInfo = resp
                })
                getUserInfoArticleList(createBy).then((resp=>{
                    this.userBlogs = resp
                }))
            },
            //事件处理器
            showInitDate: function(oldDate,full){
                return initDate(oldDate,full)
            },
            getList(){
                articleList(this.queryParams).then((response)=>{
                    this.articleList = this.articleList.concat(response.rows)
                    if(response.total<=this.articleList.length){
                        this.hasMore=false
                    }else{
                        this.hasMore=true
                        this.queryParams.pageNum++
                    }
                })
            },
            showSearchShowList:function(initData){//展示数据
                if(initData){
                    this.articleList = []

                }
                this.getList()
            },
            addMoreFun:function(){//查看更多
                this.showSearchShowList(false);
            },
            routeChange:function(){
                var that = this;
                this.queryParams.categoryId = (that.$route.query.classId==undefined?0:parseInt(that.$route.query.classId));//获取传参的classId
                this.showSearchShowList(true);
            }
        },
        components: { //定义组件

        },
        watch: {

            // 如果路由有变化，会再次执行该方法
            // '$route':'routeChange',
            // '$store.state.keywords':'routeChange'
        },

        created() { //生命周期函数
            // console.log(this.$route);
            var that = this;
            that.performSearch()
            that.routeChange();

        }
    }
</script>

<style>
  .custom-select {
    width: 100px; /* 设置宽度，可以根据需要调整 */
  }
  .user-animation {
    color: #ff0000; /* 设置您想要的颜色 */
    display: inline-block;
    transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
  }

  /* 鼠标悬停时放大字体 */
  .user-animation:hover {
    color: #ff0000; /* 设置您想要的颜色 */
    transform: scale(1.1);
  }
  .search-bar {
    margin-bottom: 20px;
  }

  .search-input-username{
    width: 300px;
    margin-right: 10px;

  }
  .search-inputs {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
  }

  .search-input {
    width: 500px;
    margin-right: 10px;
  }

  .label {
    margin-right: 5px;
  }
  .blog-count {
    font-size: 16px; /* 调整字体大小 */
    color: #4CAF50; /* 设置绿色字体颜色 */
    transition: transform 0.3s ease-in-out; /* 添加动画效果 */
  }

  .blog-count:hover {
    transform: scale(1.1); /* 鼠标悬停时放大 */
  }

  /* 粉丝数量的样式 */

  /* 粉丝数量的样式 */
  .follower-count {
    font-size: 16px; /* 调整字体大小 */
    color: #E91E63; /* 设置粉色字体颜色 */
    transition: transform 0.3s ease-in-out; /* 添加动画效果 */
  }

  .follower-count:hover {
    transform: scale(1.1); /* 鼠标悬停时放大 */
  }
  .user-others p {
    margin-bottom: 5px; /* 设置额外的垂直间距 */
  }
  .user-details {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* 调整用户信息和其他内容之间的垂直间距 */
  }

  .avatar-blog-image {
    width: 50px; /* 调整头像宽度 */
    height: 50px; /* 调整头像高度 */
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px; /* 为头像和用户信息之间添加一些水平间距 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  }

  .avatar-image {
    width: 100%;
    height: auto;
  }

  .user-info {
    margin-left: 10px; /* 调整用户名和其他信息之间的间距 */
  }

  .user-stats p {
    margin-bottom: 5px; /* 调整用户信息中各项之间的垂直间距 */
    display: flex;
    margin-left: 40px;
  }
  .avatar-blog-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
  }

  .avatar-image {
    width: 100%;
    height: auto;
  }

  /* 悬停效果，当鼠标悬停在头像上时放大 */
  .avatar-blog-image:hover {
    transform: scale(1.1);
  }

  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #ccc;
    background-color: #f5f5f5;
    border-radius: 8px;
  }

  .user-details {
    flex: 1;
  }

  .user-info h3 {
    margin-bottom: 10px;
    font-size: 24px;
    color: #333;
  }

  .follow-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #ff7f50;
    color: #fff;
  }

  .follow-button.active {
    background-color: #ff4f4f;
  }

  .follow-button:hover {
    transform: scale(1.05);
  }

  .icon-heart {
    margin-left: 6px;
    font-size: 18px;
  }

  .follow-button {
    background-color: #ff8080;
    border-color: #ff8080;
    transition: all 0.3s ease;
  }

  .follow-button:hover {
    background-color: #ff5a5a;
    border-color: #ff5a5a;
  }

  .fa-heart::before {
    content: "\f004"; /* Unicode 图标表示心形 */
  }

  .fa-heart-o::before {
    content: "\f08a"; /* Unicode 图标表示空心心形 */
  }

  .fa {
    font-family: 'FontAwesome'; /* Font Awesome 图标字体 */
    margin-right: 5px;
  }
  .user-blog-content {
    padding: 20px;
  }

  .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }

  .blog-item {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
  }

  .blog-item:hover {
    transform: translateY(-5px);
  }

  .blog-thumbnail {
    overflow: hidden;
    border-radius: 12px 12px 0 0;
  }

  .blog-image {
    width: 100%;
    height: 300px;
    transition: transform 0.3s ease-in-out;
  }

  .blog-item:hover .blog-image {
    transform: scale(1.05);
  }

  .blog-details {
    padding: 15px;
  }

  .blog-details h3 {
    margin-top: 0;
    font-size: 18px;
  }

  .blog-details p {
    margin-bottom: 0;
  }
  /*分享标题*/
  .shareTitle{
    margin-bottom: 40px;
    position: relative;
    border-radius: 5px;
    background: #fff;
    padding:15px;
  }
  .shareclassTwo{
    width:100%;
  }
  .shareclassTwo li{
    display: inline-block;
  }
  .shareclassTwo li a{
    display: inline-block;
    padding:3px 7px;
    margin:5px 10px;
    color:#fff;
    border-radius: 4px;
    background: #64609E;
    border: 1px solid #64609E;
    transition: transform 0.2s linear;
    -webkit-transition: transform 0.2s linear;
  }
  .shareclassTwo li a:hover{
    transform: translate(0,-3px);
    -webkit-transform: translate(0,-3px);
  }
  .shareclassTwo li a.active{
    background: #fff;
    color:#64609E;

  }
  /*文章列表*/
  .sharelistBox{
    transition: all 0.5s ease-out;
    font-size: 15px;
  }


  /*.sharelistBox .viewmore a:hover,.s-item .viewdetail a:hover{
      background: #48456C;
  }*/
</style>
